{% block sw_profile_index_general %}
<div class="sw-profile-index-general">
    {% block sw_profile_index_general_information %}
    <mt-card
        position-identifier="sw-profile-index-general"
        :title="$tc('sw-profile.index.titleInfoCard')"
        :is-loading="isUserLoading || !languageId"
    >
        <sw-container v-bind="{ columns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '0 30px' }">
            {% block sw_profile_index_general_information_firstname %}

            <mt-text-field
                v-model="user.firstName"
                name="sw-field--user-firstName"
                :label="$tc('sw-profile.index.labelFirstNameField')"
                :disabled="isDisabled || !acl.can('user.update_profile')"
            />
            {% endblock %}

            {% block sw_profile_index_general_information_lastname %}

            <mt-text-field
                v-model="user.lastName"
                name="sw-field--user-lastName"
                :label="$tc('sw-profile.index.labelLastNameField')"
                :disabled="isDisabled || !acl.can('user.update_profile')"
            />
            {% endblock %}
        </sw-container>

        <sw-container v-bind="{ columns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '0 30px' }">
            {% block sw_profile_index_general_information_username %}

            <mt-text-field
                v-model="user.username"
                name="sw-field--user-username"
                :label="$tc('sw-profile.index.labelUsernameField')"
                :disabled="isDisabled || !acl.can('user.update_profile')"
            />
            {% endblock %}

            {% block sw_profile_index_general_information_language %}
            <mt-select
                v-model="user.localeId"
                name="sw-field--user-localeId"
                :label="$tc('sw-users-permissions.users.user-detail.labelLanguage')"
                :disabled="!acl.can('user.update_profile')"
                :placeholder="$tc('sw-users-permissions.users.user-detail.labelLanguagePlaceholder')"
                :options="localeOptions"
            />
            {% endblock %}
        </sw-container>

        <sw-container v-bind="{ columns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '0 30px' }">
            <!-- eslint-disable sw-deprecation-rules/no-twigjs-blocks,vue/no-duplicate-attributes,vue/no-parsing-error -->
            {% block sw_profile_index_general_information_email %}

            <mt-text-field
                v-model="user.email"
                name="sw-field--user-email"
                validation="email"
                required
                :label="$tc('sw-profile.index.labelEmailField')"
                :disabled="!acl.can('user.update_profile')"
            />
            {% endblock %}

            {% block sw_profile_index_general_information_timezone %}
            <sw-single-select
                v-model:value="user.timeZone"
                name="sw-field--user-timeZone"
                class="sw-profile--timezone"
                :options="timezoneOptions"
                required
                :label="$tc('sw-users-permissions.users.user-detail.labelTimezone')"
                :is-loading="timezoneOptions.length <= 0"
                :disabled="!acl.can('user.update_profile')"
            />
            {% endblock %}
        </sw-container>
    </mt-card>
    {% endblock %}

    {% block sw_profile_index_general_image %}
    <mt-card
        v-if="acl.can('media.creator')"
        position-identifier="sw-profile-index-general-image"
        :title="$tc('sw-profile.index.titleImageCard')"
        :is-loading="isUserLoading || !languageId"
    >
        {% block sw_profile_index_general_image_content %}
        <sw-upload-listener
            auto-upload
            upload-tag="sw-profile-upload-tag"
            @media-upload-finish="onUploadMedia"
        />
        <sw-media-upload-v2
            upload-tag="sw-profile-upload-tag"
            :source="avatarMediaItem"
            :source-context="user"
            :default-folder="userRepository.schema.entity"
            :label="$tc('sw-profile.index.labelUploadAvatar')"
            :disabled="!acl.can('user.update_profile')"
            :allow-multi-select="false"
            @media-drop="onDropMedia"
            @media-upload-sidebar-open="onOpenMedia"
            @media-upload-remove-image="onRemoveMedia"
        />
        {% endblock %}
    </mt-card>
    {% endblock %}

    {% block sw_profile_index_general_password %}
    <mt-card
        v-if="showPasswordChangeCard"
        position-identifier="sw-profile-index-general-password"
        :title="$tc('sw-profile.index.titlePasswordCard')"
        :is-loading="isUserLoading || !languageId"
    >
        {% block sw_profile_index_general_password_new_password %}
        <mt-password-field
            v-model="computedNewPassword"
            name="sw-field--computedNewPassword"
            :label="$tc('sw-profile.index.labelNewPassword')"
            :disabled="!acl.can('user.update_profile')"
            :placeholder="$tc('sw-profile.index.placeholderNewPassword')"
            :error="userPasswordError"
            autocomplete="new-password"
        />
        {% endblock %}

        {% block sw_profile_index_general_password_new_password_confirm %}
        <mt-password-field
            v-model="computedNewPasswordConfirm"
            name="sw-field--computedNewPasswordConfirm"
            :label="$tc('sw-profile.index.labelNewPasswordConfirm')"
            :disabled="!acl.can('user.update_profile')"
            :placeholder="$tc('sw-profile.index.placeholderNewPasswordConfirm')"
            :validation="computedNewPassword === computedNewPasswordConfirm"
            autocomplete="new-password"
        />
        {% endblock %}
    </mt-card>
    {% endblock %}
</div>
{% endblock %}
